
/* reset css */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input,button,select{
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  outline: none;
  height: auto;
}
select{
  appearance: none;
  padding-right: 20px !important;
  background: url(../img/arrow.png) no-repeat 100% 50%;
}

button{
  cursor: pointer;
}
[disabled]{
  opacity: .5;
  cursor: not-allowed;
}
table{
  border-collapse: collapse;
}

body{
  font-size: 14px;
}

/* layout css */
.clearfix::after{
  display: block;
  content: " ";
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}
.input,
.btn{
  border: 1px solid #b0b0b0;
  background-color: white;
  padding: 4px 12px;
  border-radius: 4px;
}


.btn:hover,
.input:focus{
  border-color: #666;
}
.heading{
  text-align: center;
  padding: 20px;
}
.fruit{
  margin: 0 auto 20px;
}

.search{
  width: 800px;
  margin: 0 auto 20px;
}

.search *{
  float: left;
}

.search .input,
.search .btn{
  margin-right: 6px;
}

.search [type="number"]{
  width: 100px;
}

.fruit th,
.fruit td{
  border: 1px solid #ccc;
  padding: 10px 12px;
  text-align: left;
}
.fruit th.center,
.fruit td.center{
  text-align: center;
}
.fruit td.right{
  text-align: right;
}
.fruit td.right em{
  font-style: normal;
  color: red;
}

.fruit tbody tr:nth-child(odd){
  background-color: #eee;
}

.sort{
  position: relative;
  cursor: pointer;
}
.sort::before,
.sort::after{
  position: absolute;
  right: 7px;
  font-size: 12px;
  transform: scale(.8);
}
.sort::before{
  content: "▲";
  top: 7px;
}
.sort::after{
  content: "▼";
  bottom: 7px;
}
.sort.asc::before,
.sort.desc::after{
  color: red;
}

.pager{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.pager button{
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;
  margin: 0 4px;
}
.pager button:not([disabled],.active):hover{
  border-color: #666;
}
.pager button.active{
  background-color: red;
  color: white;
  border-color: red;
}